<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical"
    :collapse="isCollapse"
    background-color="#304156"
    text-color="#ffffff"
    active-text-color="#409EFF"
  >
    <el-menu-item index="/">
      <el-icon><HomeFilled /></el-icon>
      <span style="color: #ffffff">首页</span>
    </el-menu-item>
    <el-menu-item index="/create_video">
      <el-icon><VideoCamera /></el-icon>
      <span>PPT转视频</span>
    </el-menu-item>
    <el-menu-item index="/create-ppt">
      <el-icon><Document /></el-icon>
      <span>教学PPT生成</span>
    </el-menu-item>
    <el-menu-item index="/videos">
      <el-icon><List /></el-icon>
      <span>视频列表</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  HomeFilled,
  VideoCamera,
  Document,
  List
} from '@element-plus/icons-vue'

const route = useRoute()
const isCollapse = ref(false)

const activeMenu = computed(() => {
  return route.path
})
</script>

<style scoped>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
